<!--
 * @Author: White
 * @description: 歌单
 * @LastEditTime: 2021-09-01 11:42:59
-->

<template>
    <!-- 分类 -->
    <div class="catlist">
        <el-popover
            placement="bottom-start"
            width="740px"
            trigger="click">
            <!-- 弹窗内容 -->
            <el-scrollbar height="460px">
                <div class="popover-header">
                    <div class="popover-title">{{typename}}</div>
                </div>
                <div class="popover-item" v-for="(item, index) in typelist" :key="index">
                    <div class="popover-left">
                        {{item.name}}
                    </div>
                    <div class="popover-right">
                        <div class="popover-right-item" v-for="(ite, ind) in item.children" :key="ind" @click="songType(ite.name)">
                            <span>{{ite.name}}</span>
                            <div class="icon" v-if="ite.hot">HOT</div>
                        </div>
                    </div>
                </div>
            </el-scrollbar>
            <template #reference>
                <div class="allsonglist" @click="allcate">
                    <span>全部歌单</span>
                    <i class="el-icon-arrow-right"></i>
                </div>
            </template>
        </el-popover>
        <div class="hotsonglist">
            <div class="hotsonglist-item" v-for="(item, index) in hotlist" :key="index">
                <span @click="songType(item.name)" :class="[activeTab === item.name && 'active']">{{item.name}}</span>
            </div>
        </div>
    </div>
    <!-- 歌单 -->
    <div class="card-wrapper-loading"
        v-show="loading"
        v-loading="loading"
        element-loading-text="载入中..."
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(255, 255, 255)">
    </div>
    <div class="playlist-card" v-show="!loading">
        <div class="playlist-item" v-for="(item, index) in songlist" :key="index" @click="songListdetail(item.id)">
            <div class="playlist-image">
                <img :src="item.coverImgUrl+'?param=80y80'" alt="item.name">
            </div>
            <div class="playlist-text">
                <p>{{item.name}}</p>
            </div>
        </div>
    </div>
</template>

<script>
import { useRouter } from 'vue-router'
import { defineComponent, reactive, onMounted, toRefs } from 'vue'
import { getPlaytop, getPlayhot, getPlaylist } from '@/api/music'
export default defineComponent ({
    setup () {
        const router = useRouter()
        const data = reactive({
            loading: true,
            activeTab: '',
            typename: '',
            typelist: [],
            songlist: [],
            hotlist: []
        })
        const parma = reactive({
            cat: '',
            limit: 50,
            offset: 10
        })
        onMounted( async () => {
            getList()
            getType()  // 歌单分类
        })

        // 初始化歌单
        const getList = async() => {
            data.loading = true
            const res = await getPlaytop(parma)
            if (res.data.code === 200) {
                data.songlist = res.data.playlists
                data.loading = false
            }
        }

        // 歌单分类
        const getType = async() => {
            const hot = await getPlayhot()
            data.hotlist = hot.data.tags
        }

        // 全部歌单
        const allcate = async() => {
            const type = await getPlaylist()
            data.typename = type.data.all.name
            const arr = []
            for (const key in type.data.categories) {
                arr.push({
                    name: type.data.categories[key],
                    index: key,
                    children: []
                })
            }
            for (let i = 0; i < arr.length; i++) {
                for (let a = 0; a < type.data.sub.length; a++) {
                    if (arr[i].index == type.data.sub[a].category) {
                        arr[i].children.push({
                            name: type.data.sub[a].name,
                            hot: type.data.sub[a].hot,
                        })
                    }
                }
            }
            data.typelist = arr
        }
        
        // 分类歌单
        const songType = (val) => {
            data.activeTab = val
            parma.cat = val
            getList()
        }
        // 歌单详情
        function songListdetail(id){
            router.push({ name: "songListdetail", params: { id: id } })
        }
        return {
            ...toRefs(data),
            ...toRefs(parma),
            allcate,
            songType,
            songListdetail
        }
    }
})
</script>

<style lang="scss" scoped>
.popover-header {
    height: 50px;
    line-height: 50px;
    border-bottom: 2px solid ren;
    border-bottom: 1px solid #e5e5e5;
    display: flex;
    align-items: center;
    .popover-title {
        width: 80px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        border-radius: 20px;
        background-color: #fff6f5;
        color: #d23a31;
        cursor: pointer;
    }
}
.popover-item {
    display: flex;
    margin: 10px 0px;
    padding-left: 20px;
    .popover-left {
        width: 15%;
        font-size: 14px;
        line-height: 30px;
        color: #bfbfbf;
        margin-left: 4px;
    }
    .popover-right {
        width:85%;
        display: flex;
        flex-wrap: wrap;
        display: flex;
        color: #333;
        font-size: 13px;
        margin-bottom: 10px;
        .popover-right-item {
            display: flex;
            align-items: center;
            width: 100px;
            height: 30px;
            cursor: pointer;
            .icon {
                display: inline-block;
                font-size:2px;
                color: red !important;
            }
        }
    }
}
.catlist {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 30px;
    padding: 20px 0px;
    :deep(.el-popover) {
        height: 200px !important;
    }
    .allsonglist {
        width: 100px;
        height: 100%;
        border: 1px solid #d3d3d3;
        border-radius: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        font-size: 14px;
        color: #333;
        span {
            cursor: pointer;
        }
    }
    .hotsonglist {
        .hotsonglist-item {
            display: inline-block;
            color: #666;
            font-size: 12px;
            padding: 0 4px;
            border-left: 1px solid #f2f2f2;
            border-right: 1px solid #f2f2f2;
            cursor: pointer;
            span {
                padding: 4px 12px;
                box-sizing: border-box;
                border-radius: 11px;
                cursor: pointer;
            }
            .active {
                background-color: #fdf6f5;
                border-radius: 10px;
                color: #b82710;
            }
        }
        
    }
}
.card-wrapper-loading {
    height: calc(100vh - 700px);
    top: 180px;
    z-index: 9;
    :deep(.el-loading-spinner) {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    :deep(.el-icon-loading) {
        color: #666;
    }
    :deep(.el-loading-text) {
        margin-left: 2px;
        color: #666;
    }
}
.playlist-card {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .playlist-item {
        width: 20%;
        border-radius: 8px;
        margin-bottom: 20px;
        padding: 0px 10px;
        box-sizing: border-box;
        .playlist-image {
            width: 100%;
            img {
                width: 100%;
                border-radius: 10px;
            }
        }
        .playlist-text {
            p {
                margin-top: 6px;
                font-size: 14px;
                color: #333;
                line-height: 1.5;
            }
        }
    }
}
</style>
